<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo1{
				/* 正方形 变成圆形:圆角大余等于宽度的50% */
				border-radius: 50%; 
				color: #fff;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<!-- 样式操作： 获取样式、 设置样式
			js操作样式，只能操作内联样式
				- 获取的是内联样式
				- 设置也是内联样式
		 -->
		<div class="demo1" style="width: 200px;height: 200px;background-color: #0069D9;">我是div</div>
		<div class="demo2"></div>
		<script>
			// 获取标签
			var demo1 = document.querySelector(".demo1")			
			var demo2 = document.querySelector(".demo2")
			
			//获取demo1的一部分样式
			var w = demo1.style.width //从标签的 style中获取width 样式
			var h = demo1.style.height //从标签的 style中获取height样式
			// 样式有- ，需要将- 位置 ，变为首字母大写
			// 从标签的style中获取background-color样式
			var bg = demo1.style.backgroundColor 

			console.log(w)
			console.log(h)
			console.log(bg)
			// 给demo2 设置样式
			demo2.style.width = w
			demo2.style.height = h
			demo2.style.backgroundColor = bg
			demo2.style.borderRadius = "50%"
		</script>
	</body>
</html>
